<template>
  <div class="seniorProfile">
    <!-- <van-icon style="" name="arrow-left" /> -->
    <van-nav-bar left-text="" left-arrow @click-left="onClickLeft" />
    <div class="header">
      <van-row>
        <van-col span="8">
          <img :src="uploads + userInfo.user_img" alt="" />
        </van-col>
        <van-col span="6">
          <div class="user-texts">
            <span
              ><h3>{{ userInfo.real_name }}</h3>
              <span
                ><img
                  :src="require('../assets/前辈.png')"
                  alt=""
                  style="
                    width: 22px;
                    height: 22px;
                    position: absolute;
                    top: 15px;
                    left: 70px;
                  " /></span
            ></span>

            <span class="num"> 前辈说号：{{ userInfo.id }} </span>
            <p class="title">
              <span style="position: absolute; top: 70px; left: 10px">{{
                userInfo.sex
              }}</span>
              <span style="display: inline-block;margin-left: 20px;margin-top: 7px;">{{
                userInfo.school
              }}</span>
              <!-- <span>考研</span> -->
            </p>
          </div>
        </van-col>
        <van-col span="10">
          <div class="edit">
            <button><van-icon name="plus" />关注</button>
          </div>
          <div class="chat">
            <router-link to="/chat">
              <button>私信</button>
            </router-link>
          </div>
        </van-col>
      </van-row>
      <div class="pertext">
        <span>
          个人简介：<span style="font-family: cursive">{{
            userInfo.production
          }}</span>
        </span>
      </div>
    </div>
    <div class="homepage">
      <van-tabs v-model="active" animated @click="onSubmit">
        <van-tab
          title="ta的关注"
          class="list"
          style="height: 600px; overflow-y: auto; overflow-x: hidden"
        >
          <van-row class="item" v-for="item in myattention" :key="item.id">
            <van-col span="8">
              <img :src="uploads+item.user_img" alt="" />
            </van-col>
            <van-col span="6">
              <div class="user-texts">
                <h4>{{ item.username }}</h4>
                <p class="title">
                  <span>{{ item.sex }}</span>
                  <span>{{ item.school }}</span>
                </p>
              </div>
            </van-col>
            <van-col span="10">
              <div class="attention">
                <button>已关注<van-icon name="success" /></button>
              </div>
            </van-col>
            <van-divider />
          </van-row>
        </van-tab>
        <van-tab
          title="ta的粉丝"
          class="list"
          style="height: 600px; overflow-y: auto; overflow-x: hidden"
        >
          <van-row class="item" v-for="item in myfans" :key="item.id">
            <van-col span="8">
              <img :src="uploads+item.user_img" alt="" />
            </van-col>
            <van-col span="6">
              <div class="user-texts">
                <h4>{{ item.username }}</h4>
                <p class="title">
                  <span>{{ item.sex }}</span>
                  <span>{{ item.school }}</span>
                  <span>本科</span>
                </p>
              </div>
            </van-col>
            <van-col span="10">
              <div class="attention">
                <button><van-icon name="plus" />关注</button>
              </div>
            </van-col>
            <van-divider />
          </van-row>
        </van-tab>
        <van-tab
          title="ta的收藏"
          style="height: 600px; overflow-y: auto; overflow-x: hidden"
        >
          <van-grid :border="false" :column-num="2">
            <van-grid-item v-for="item in myshoucang" :key="item.id">
              <img
                :src="uploads+item.img"
                alt=""
                style="width: 100%; height: 100%; border-radius: 0"
              />
              <p style="font-weight: bold">{{ item.title }}</p>
              <img
                :src="require('../assets/img/touxiang2.jpg')"
                alt=""
                style="
                  width: 30px;
                  height: 50px;
                  margin-right: 130px;
                  border-radius: 100%;
                "
              />
              <p
                style="margin-top: -25px;color: gray"
              >
                {{ item.username }}
              </p>
            </van-grid-item>
          </van-grid>
        </van-tab>
        <van-tab
          title="ta的发布"
          style="height: 600px; overflow-y: auto; overflow-x: hidden"
        >
          <van-grid :border="false" :column-num="2">
            <van-grid-item v-for="item in myinput" :key="item.id">
              <img
                :src="uploads+item.img"
                alt=""
                style="width: 100%; height: 100%; border-radius: 0"
              />
              <p style="font-weight: bold">{{ item.title }}</p>
              <img
                :src="uploads+item.user_img"
                alt=""
                style="
                  width: 30px;
                  height: 50px;
                  margin-right: 130px;
                  border-radius: 100%;
                "
              />
              <p
                style="margin-top: -25px; color: gray"
              >
                {{ item.username }}
              </p>
            </van-grid-item>
          </van-grid>
        </van-tab>
      </van-tabs>
      <bottom :active="0"></bottom>
    </div>
  </div>
</template>

<script>
import axios from "axios";
import bottom from "@/components/bottom.vue";

export default {
  components: { bottom },
  data() {
    return {
      userInfo: [],
      article_detail: [],
      myattention: [],
      myfans: [],
      myshoucang: [],
      myinput: [],
      active: 3,
      uploads: this.$store.state.uploads,
    };
  },
  methods: {
    return1() {
      history.go(-1);
    },
    onSubmit(name, title) {
      //   console.log(title);
      let user_id = localStorage.getItem("user_id");
      if (title === "ta的关注") {
        axios
          .get("/api/qbs/api/myattention.php?user_id=" + user_id)
          .then((response) => {
            console.log(response.data.data);
            this.myattention = response.data.data[0];
            console.log(response.data.data[0]);
            // console.log(item);
          });
      } else if (title == "ta的粉丝") {
        axios
          .get("/api/qbs/api/myfans.php?user_id=" + user_id)
          .then((response) => {
            console.log(response.data.data);
            this.myfans = response.data.data[0];
            console.log(response.data.data[0]);
            // console.log(item);
          });
      } else if (title == "ta的收藏") {
        axios
          .get("/api/qbs/api/myshoucang.php?user_id=" + user_id)
          .then((response) => {
            console.log(response.data.data);
            this.myshoucang = response.data.data[0];
            console.log(response.data.data[0]);
            // console.log(item);
          });
      } else {
        axios
          .get("/api/qbs/api/myinput.php?user_id=" + user_id)
          .then((response) => {
            console.log(response.data.data);
            this.myinput = response.data.data[0];
            console.log(response.data.data[0]);
            // console.log(item);
          });
      }
    },
    onClickLeft() {
      history.go(-1);
      //   Toast('返回');
    },
  },

  created() {
    axios
      .get("/api/qbs/api/userInfo.php?id=" + this.$route.params.id)
      .then((response) => {
        console.log(response);
        console.log(response.data.data);
        this.userInfo = response.data.data;
        localStorage.setItem("user_id", response.data.data.id);
      });
    console.log("created");
  },
};
</script>

<style>
.seniorProfile {
  margin-top: 13px;
}
.header img {
  width: 80px;
  height: 80px;
  margin-right: 0.5rem;
  border-radius: 100%;
  overflow: hidden;
}
.user-texts {
  position: absolute;
  margin-top: -10px;
  margin-left: -25px;
  text-align: left;
  padding: 10px;
}
/* .nickname{
    line-height: 0px;
} */
.user-texts h3 {
  line-height: 0px;
}
.user-texts h4 {
  line-height: 0px;
}
.num {
  color: darkgrey;
  font-size: 7px;
  float: left;
}
.title span {
  background-color: lightpink;
  border-radius: 20%;
  font-size: 12px;
}
.edit {
  font-size: 10px;
  position: absolute;
  margin-left: 65px;
}
.chat {
  font-size: 15px;
  position: absolute;
  margin-left: 65px;
  margin-top: 60px;
}
.edit button {
  background: lightpink;
  color: #fff;
  font-size: 0.8rem;
  border: none;
  padding: 0.5rem 1rem;
  border-radius: 22px;
}
.chat button {
  background: lightpink;
  color: #fff;
  font-size: 1rem;
  border: none;
  /* padding:0.5rem 1rem; */
  border-radius: 22px;
}
.pertext {
  position: absolute;
  left: 19px;
  top: 165px;
}
.homepage {
  position: relative;
  top: 50px;
}
.van-tabs__line {
  background-color: lightpink;
}
.homepage img {
  width: 60px;
  height: 60px;
  margin-right: 0.5rem;
  border-radius: 100%;
  overflow: hidden;
}
p {
  line-height: 16px;
}
.attention button {
  background: #fff;
  border: 1px solid darkgrey;
  color: darkgray;
  font-size: 0.8rem;
  /* padding:0.5rem 1rem; */
  border-radius: 30px;
  position: relative;
  top: 15px;
}
.van-divider {
  border-color: lightpink;
}
.item {
  position: relative;
  /* top: 10px; */
}
.list {
  margin-top: 10px;
  margin-bottom: 20px;
}
.van-icon-arrow-left::before {
  color: lightpink;
  font-size: 20px;
}
</style>
